<template>
    <h1>App组件</h1>
    <Child :mes="mes" mes1="建哥" @xxx="xxx">
        <template v-slot:jian="{age}">
            <div>李子建{{age}}</div>
        </template>
    </Child>
    <button @click="mes += '请黄昏不败'"></button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Child from "./components/Child.vue"

export default defineComponent({
    name:"App",
    components:{
        Child
    },
    beforeCreate(){
        console.log("beforeCreate ");
        this.$nextTick(function(){
            console.log("nextTick");
        })
    },
    mounted(){
        console.log("mounted");
    },
    setup(props,context){
        console.log("APP的"+props,context);// ? Proxy {} {expose: ƒ}
        
        // ? props里面有父级组件向子级组件传递的所有数据，必须是在子级组件中使用props接受到的所有的属性
        //? context 有三个属性  slot  emit  attrs
        //? attrs就是等于this.$attrs 表示当前标签的属性 不包含props里面的属性 没有注册过属性的
        let mes = ref("建哥最帅");
        function xxx(text:string){
            mes.value+=text;
        }
        return {
            mes,
            xxx
        }
    },
})
</script>
<style scoped>

</style>
